import React, { useEffect, useState } from 'react'
import Nav from '../../component/Nav';
import { Image, ImageViewer } from "antd-mobile/2x"
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import * as shareActions from "../../store/actions/share"
import { filterTime } from "../../utils/filterTime"
import "./index.scss"
const Share = (props) => {
    const { shareList, getShareList } = props
    const [index, setIndex] = useState(0)
    const [visible, setVisible] = useState(false)
    const [img, setImg] = useState([]);
    const { push } = props.history;
    useEffect(() => {
        getShareList()
    }, [getShareList])
    return (
        <div className='shareBox'>
            <Nav>楼市圈</Nav>
            <div className='contentWarp'>{
                shareList.length > 0 && shareList.map(v => {
                    return <dl key={v.id}>
                        <dt>
                            <span>
                                <img src={v.headImg ? v.headImg : "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ffb9431a4c99691e54952d85ed034faf9a6b7e4f22d45-xy5FHF_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642992836&t=6e008edf1314a1617ab0b9498711176f"} alt="" />
                            </span>

                            <span>{v.name}</span>
                        </dt>
                        <dd>
                            <div>
                                {v.content}
                            </div>
                            <div className='imgList'>
                                {
                                    v.img ? v.img.split(",").length > 0 && v.img.split(",").map((item, index) => {
                                        return <Image onClick={() => { setIndex(index); setVisible(true); setImg([...v.img.split(",")]) }} lazy key={item} style={{ border: "1px solid #666" }} src={item} width={v.img.split(",").length > 1 ? "33%" : "60%"} height={v.img.split(",").length > 1 ? 200 : 300} />
                                    }) : ""
                                }
                                {
                                    v.img && <ImageViewer.Multi

                                        images={img}
                                        visible={visible}
                                        defaultIndex={index}
                                        onClose={() => {
                                            setVisible(false)
                                            setIndex(0)
                                            ImageViewer.clear()
                                        }}
                                    />
                                }

                            </div>
                            <p>
                                {filterTime(v.create_time)}
                                <b>删除</b>
                            </p>
                        </dd>
                    </dl>
                })
            }</div>
            <div className="addShare" onClick={() => push("/addShare")}>
                +
            </div>
        </div>
    )
}
const mapStateToProps = (state) => {
    return state.share
}
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(shareActions, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Share);
